<template>
    <div id="app">
        <el-container>
            <el-container>
                <!-- Global navigation bar -->
                <el-header class="elHeader">
                    <Header></Header>
                    <!-- Turn on Chinese English switch -->
                    <el-select @change="langChange" placeholder="Choose" size="mini" class="ml-10" :value="lang">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <!-- Open the right sidebar -->
                    <el-button class="ml-10" type="primary" icon="el-icon-s-unfold" size="mini" @click="showRight=!showRight" v-if="!showRight"></el-button>
                    <el-button class="ml-10" type="primary" icon="el-icon-close" size="mini" @click="showRight=!showRight" v-else></el-button>
                </el-header>
                <el-container>
                    <el-container>
                        <!-- sidebar -->
                        <transition name="el-zoom-in-left">
                            <el-aside width="130px" v-if="showLeft" class="left">sidebar</el-aside>
                        </transition>
                        <!-- Tab -->
                        <el-main　class="pl-60">
                            <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                                <el-tab-pane label="CRM" name="/">
                                    <router-view />
                                </el-tab-pane>
                                <el-tab-pane label="Order" name="/order">
                                    <router-view />
                                </el-tab-pane>
                            </el-tabs> -->
                            <router-view />
                        </el-main>
                        <el-footer class="dflex text-gray" style="border-top: 1px solid #ebebeb;">eBay and the eBay logo are trademarks of eBay Inc.CubeOrder and the CubeOrder logo are trademarks of CubeOrder Ltd.</el-footer>
                    </el-container>
                </el-container>
            </el-container>
            <transition name="el-zoom-in-right">
                <!-- width 400 -->
                <el-aside v-if="showRight" class="right" :width="rightHelpWidth">
                    <right-help @close="showRight=!showRight" @changeWidth="changeWidth" @fullScreen="fullScreen"></right-help>
                </el-aside>

            </transition>
            <!-- Open the left sidebar -->
            <el-button class="leftBtn" type="primary" icon="el-icon-s-fold" size="mini" @click="showLeft=!showLeft" v-if="!showLeft"></el-button>
            <el-button class="leftBtn" type="primary" icon="el-icon-close" size="mini" @click="showLeft=!showLeft" v-else></el-button>
        </el-container>
    </div>
</template>
<script>
    import Header from "@/components/header"
    import rightHelp from "@/components/right-help"
    export default {
        components: {
            Header,
            rightHelp
        },
        data() {
            return {
                activeIndex: "6",
                activeName: "/",
                isCollapse: true,
                showLeft: false,
                showRight: false,
                rightHelpWidth: '400px',
                options: [{
                    value: 'en',
                    label: 'English'
                }, {
                    value: 'cn',
                    label: '中文'
                }],
                lang: "en"
            }
        },
        mounted() {
            if (localStorage.getItem("lang")) {
                this.lang = localStorage.getItem("lang")
                this.$i18n.locale = localStorage.getItem("lang");
            }
        },
        methods: {
            changeWidth() {
                if (this.rightHelpWidth == '400px') {
                    this.rightHelpWidth = '300px'
                } else {
                    this.rightHelpWidth = '400px'
                }
            },
            fullScreen() {
                if (this.rightHelpWidth == '400px' || this.rightHelpWidth == '300px') {
                    this.rightHelpWidth = '100%'
                } else {
                    this.rightHelpWidth = '400px'
                }
            },
            handleClick(tab, event) {
                console.log(tab, event);
                this.$router.push(tab.name)
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            langChange(e) {
                localStorage.setItem('lang', e);
                this.$i18n.locale = e;
                window.location.reload()
            }
        }
    }
</script>

<style>
    @import url("~@css/app.css");
    @import url("~@css/common.css");
</style>